import React from "react";
import TheButton from "../../../components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import Editor from "../component/Editor";
import TheDialog from "../../../components/TheDialog";
import { apiServiceShowLabelPage, apiServiceShowLabelDel } from '@/request/services'
import TheImage from '@/components/TheImage'

class Tags extends React.Component {
  state = {
    columns: [
      // {
      //   title: "门店类型",
      //   dataIndex: "businessCategory",
      //   key: "businessCategory",
      //   render: (text, render) => {
      //     switch (text){
      //       case '0':
      //         return '宠物门店';
      //       case '1':
      //         return '宠物酒店';
      //       case '2':
      //         return '宠物医院';
      //       default:
      //         return ''
      //     }
      //   }
      // },
      {
        title: "服务标签",
        dataIndex: "serviceShowLabelName",
        key: "serviceShowLabelName",
      },
      {
        title: "标签图片",
        render: (text, render) => {
          return <TheImage src={render.serviceShowLabelImage} width={80} height={80} />
        }
      },
      {
        title: "操作",
        render: (text, render) => {
          return (
            <div>
              <TheButton  haspermi={['service:tags:update']}  onClick={() => this.onEditor('editor', render)}>修改</TheButton>
              <TheButton  haspermi={['service:tags:delete']}  onClick={() => this.deleteConfirm(render.serviceShowLabelId)}>删除</TheButton>
            </div>
          );
        },
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    title: "",
    visible: false,
    editorValue: {},
    type: ''
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { pageData: { pageNo, pageSize } } = this.state
    let res = await apiServiceShowLabelPage({ pageNo, pageSize })
    if (res.data && res.code === 0) {
      this.setState({
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        dataSource: res.data,
        total: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  onAdd = (type) => {
    this.setState({ visible: true, title: "新增服务标签", type });
  };
  onEditor = (type, value) => {
    this.setState({ visible: true, title: "修改服务标签", editorValue: value, type });
  };
  deleteConfirm = (serviceShowLabelId) => {
    React.$confirm({
      title: "您确定删除此项服务标签吗？",
      onOk: async () => {
        await apiServiceShowLabelDel({ serviceShowLabelId })
        React.$message({
          type: 'info',
          content: '删除成功'
        })
        this.getData()
      },
    });
  };
  handleCancel = () => {
    this.setState({ title: "", visible: false });
  };
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageSize, pageNo },
      total,
      title,
      visible,
      type,
      editorValue
    } = this.state;
    return (
      <div className="p-layout-box">
        <div
          className="p-search-box"
          style={{ display: "flex", justifyContent: "flex-end" }}
        >
          <TheButton haspermi={['service:tags:add']} type="default" size="middle" onClick={() => this.onAdd('add')}>
            新增标签
          </TheButton>
        </div>
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
        <TheDialog
          title={title}
          footer={null}
          handleCancel={this.handleCancel}
          visible={visible}
          width={400}
        >
          <Editor reload={this.getData} type={type} editorValue={editorValue} handleCancel={this.handleCancel} />
        </TheDialog>
      </div>
    );
  }
}

export default Tags;
